<template>
  <div>
    <van-field v-model="tel" placeholder="请输入手机号"/>
    <van-button round class="btn" block color="#ff6666" :disabled="flag" @click="next">下一步</van-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { Dialog, NavBar, Field, Button } from 'vant'
import { doCheckPhone } from '../../api/user'

Vue.use(Dialog)
Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)

export default {
  data () {
    return {
      // flag: true,
      tel: ''
    }
  },
  computed: {
    flag () {
      return !/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(this.tel)
    }
  },
  methods: {
    async next () {
      const cellNumber = await doCheckPhone({ tel: this.tel })
      // console.log(cellNumber.data.code) // 100005已注册  200继续注册
      if (cellNumber.data.code === '10005') {
        Dialog.confirm({
          title: '该手机号已注册',
          message: '是否跳转登陆页面'
        })
          .then(() => {
            this.$router.push('/login')
          })
          .catch(() => {

          })
      } else {
        localStorage.setItem('tel', this.tel)
        Dialog.confirm({
          message: '我们将发送验证码到' + this.tel
        })
          .then(() => {
            this.$router.push('/step0/step2')
          })
          .catch(() => {

          })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.content
  padding 30px 20px
</style>
